//这是入口文件

//1、导入Jquery
//es6 中导入模块的方式
//由于 ES6 的代码，太高级了，浏览器解析不了，所以会报错
import $ from 'jquery'

$(function() {
    $('li:odd').css('backgroundColor', 'red')
    $('li:even').css('backgroundColor', function() {
        return '#' + 'D97634'
    })

})

//经过刚才的演示
//1、webpack 可以处理JS文件之间的依赖关系
//2、webpack 能够处理js的兼容问题，把高级的语法转换成低级的语法

//导入css样式表
//webpack 默认只能打包处理js文件
// 如果要处理非JS文件，需要手动安装合适的第三方loader
//1、安装 cnpm i style-loader css-loader -D
//2、打开 webpack.config.js 新增配置节点，叫做module ，他是一个对象，在这个module对象身上，有个rules书属性，这个属性是个数组u，这个数组中，存放第三方的匹配和处理规则；
import './css/index.css'

import './css/index.less'
import './css/index.scss'


import 'bootstrap/dist/css/bootstrap.css'



class Person {
    //定义静态属性：就是可以直接通过类名直接访问的属性
    //实例属性：只能通过类的实例，来访问的属性，叫做实例属性
    static info = { name: 'zs', age: 20 }
}
console.log(Person.info)
    // var p1 = new Person()
    // p1.name()

//在webpack中默认只能处理一部分分Es6代码，一些高级语法处理不了，
//需要借助loader
//通过Babel可以帮助我们将高级语法转成低级语法
//1、在webpack中可以运行两套包，去安装 babel相关的loader功能
//1、1第一套包：npm i babel-core babel-loader babel-plugin-transform-runtime -D
//npm install babel-loader @babel/core babel-plugin-transform-runtime -D
// babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
//1、2第二套包：npm i babel-preset-env babel-preset-stage-0 -D
//2、打开webpack 的配置文件，在module节点中的rules数组中，添加一个新的匹配规则
//2、1 {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
//3 在项目的根目录中，新建一个叫做.babelrc 的babel的配置文件，属于json格式，所以再写的时候必须符合JSON格式规范，不能写注释，字符必须使用双引号
//3、1在.babelrc 写如下配置
// {
//     "presets":["env","stage-0"], //【语法】
//     "plugins":["transform-runtime"]
// }

// function Animal(name) {
//     this.name = name
// }
// Animal.info = 123
// var a1 = new Animal('小花')

// console.log(Animal.info)  //静态属性
// console.log(a1.info)